<template>
  <div>
    <!-- <AA ref="qq" tt="1" yy="2" uu="3" @ff="f" @ff2="f"></AA> -->
    <!-- <button @click="f"></button> -->
    <h1>{{ age }}</h1>
    <!-- <my-input v-model='age' />
    <my-input :value="age" @input="age = $event" /> -->
    <!-- 
      v-model ==> 
      :value + @input 
      组件上的表现 :value="xxx" @input="xxx = $event"
      表单上的表现 :value="xxx" @input="xxx = $event.target.value"
      -->
    <my-input v-model='age' :xxx="name" @update:xxx="name = $event" />
    <my-input v-model='age' :xxx.sync="name" />
  </div>
</template>
<script>
// @ is an alias to /src
import AA from './components/A.vue'
import myInput from './components/my-input2'

export default {
  name: 'XXX',
  data() {
    return {
      name: "珠峰",
      age: 100
    }
  },
  methods: {
    f() {
      // console.log(this.$refs.qq.name)
      // this.$refs.qq.fn()
      console.log(this.$children)
    }
  },
  components: {
    AA, myInput
  }
}
</script>
<style lang="less">
</style>